<template>
  <div class="activity_list">
    <el-dialog :title="title" :visible.sync="showSelectListPop" width="80%"  :before-close="cancel">
      <div class="activity_list_content">
        <div class="search_head">
          <el-form
            ref="form"
            :model="form"
            label-width="80px"
            class="search_form"
          >
            <el-form-item label="名称" prop="title">
              <el-input style="width: 130px;" v-model="form.title" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="文章分类" prop="type" v-if="selectType === '1'">
              <el-select style="width: 130px;" v-model="form.type" placeholder="文章分类" clearable>
                <el-option
                  v-for="dict in dict.type.article_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="活动类型" prop="activityType" v-if="selectType === '2' || selectType === '3'">
              <el-select style="width: 130px;" v-model="form.activityType" placeholder="活动类型" clearable>
                <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in activityTypeList"
                    :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="渠道" prop="channelCode">
          <el-select style="width: 130px;"
            v-model="form.channelCode"
            placeholder="请选择渠道"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="(item, index) in channelList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机构" prop="strategyOrgan">
          <el-cascader style="width: 150px;"
          clearable
          collapse-tags
          :options="organizationList"
          :props="organizationList_props"
          v-model="strategyOrgan"
          :show-all-levels="false"
          placeholder="请选择组织机构"
           @change="strategyOrganChange"
        >
        </el-cascader>
        </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSearch">查询</el-button>
              <el-button @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="activity_table">
          <el-table
            :data="tableData"
            style="width: 100%"
            height="200"
            highlight-current-row
            @current-change="handleCurrentChange"
          >
            <template v-if="selectType === '1'">
              <el-table-column prop="articleId" label="序号" ></el-table-column>
              <el-table-column prop="title" label="名称"></el-table-column>
              <el-table-column prop="type" label="类型">
                <template slot-scope="scope">
                  <span >文章</span>
                </template>
              </el-table-column>
              <el-table-column prop="channelName" label="渠道"></el-table-column>
              <el-table-column prop="organName" label="机构" ></el-table-column>
              <el-table-column prop="introduction" label="说明"></el-table-column>
            </template>
            <template v-else-if="selectType === '4'">
              <el-table-column prop="id" label="序号" ></el-table-column>
              <el-table-column prop="title" label="名称"></el-table-column>
              <el-table-column prop="type" label="类型">
                <template slot-scope="scope">
                  <span >海报</span>
                </template>
              </el-table-column>
              <el-table-column prop="channel" label="渠道"></el-table-column>
              <el-table-column prop="orgcode" label="机构" ></el-table-column>
              <el-table-column prop="description" label="说明"></el-table-column>
            </template>
            <template v-else>
              <el-table-column prop="activityId" label="序号" ></el-table-column>
              <el-table-column prop="activityName" label="名称"></el-table-column>
              <el-table-column prop="type" label="类型">
                <template slot-scope="scope">
                  <span>{{selectType == '2' ? '线上活动' : '线下活动'}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="channelName" label="渠道"></el-table-column>
              <el-table-column prop="organName" label="机构" ></el-table-column>
              <el-table-column prop="activityTypeName" label="说明"></el-table-column>
            </template>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import { findList } from "@/api/system/essay";
import { listPoster, queryActivityList } from "@/api/system/poster";

export default {
  name: "strategyList",
  props: ["showSelectListPop", "activityData", "selectType"],
  dicts: ['article_type'],
  data() {
    return {
      strategyOrgan: [],
      organizationList_props: {
        multiple: false,
        label: "organName",
        value: "organCode",
        children: "childOrganList",
        checkStrictly: true,
      },
      form: {
        title: "",
        type: "",
        channelCode: "",
        organId: "",
        activityType: ""
      },
      search: "",
      activityTypeList: [],
      tableColumnData: [],
      tableData: [],
      currentRow: {},
      title: "",
      labelId: "",
      channelList: [],
      organizationList: [],
      activityTypeList: [],
    };
  },
  mounted() {
    let type = this.selectType;
    switch (type) {
      case "1":
        this.title = "文章列表";
        break;
      case "2":
      this.title = "线上活动列表";
        break;
      case "3":
      this.title = "线下活动列表";
        break;
      case "4":
      this.title = "海报列表";
        break;
    }
    this.getEnumList();
    this.getList()
  },
  methods: {
    strategyOrganChange(val) {
      if (val.length !== 0) {
        this.form.organId = val[val.length - 1];
      } else { 
        this.form.organId = ''
      }
    },
    getWork() {
      console.log("getWork--------");
      listPoster(this.form).then(response => {
        console.log('listPoster', response)
        this.tableData = response;
      });
    },
    queryActivityList(data) {
      console.log("queryActivityList--------");
      queryActivityList(data).then(response => {
        console.log('queryActivityList', response)
        this.tableData = response.rows;
      });
    },
    async getEnumList() {
      try {
        const response = await axios.post(
          process.env.VUE_APP_BASE_API + "/strategy/queryEnumList",
          {}
        );
        if (response.data.enumList) {
          if (response.data.enumList.channelType) {
            this.channelList = response.data.enumList.channelType;
            console.log('this.channelList ', this.channelList);
          }
          if (response.data.enumList.organList) {
            this.organizationList = JSON.parse(
              response.data.enumList.organList
            );
          }
          if (response.data.enumList.activityType) {
            this.activityTypeList = response.data.enumList.activityType;
          }
          
        }
      } catch (error) {
        console.error("Error fetching users:", error);
      }
    },
    getList() {
      this.loading = true;
      let data = {}
      if(this.selectType === '1') {
          data = {
            title: this.form.title,
            type: this.form.type,
            channelCode: this.form.channelCode,
            organId: this.form.organId
          }
          findList(data).then(response => {
          this.tableData = response.rows;
          this.loading = false;
        });
      } else if(this.selectType === '4') {
        this.getWork();
      } else if(this.selectType === '2' || this.selectType === '3') {
        let activityGroup = this.selectType === '2' ? 'up' : 'down';
        let data = {
          activityName: this.form.title,
          activityType: this.form.activityType,
          channelCode: this.form.channelCode,
          organId: this.form.organId,
          ...{activityGroup: activityGroup}
        }
        this.queryActivityList(data);
      }
      
    },
    onReset() {
      this.form = {
        title: "",
        type: "",
        channelCode: "",
        organId: "",
        activityType: ""
      }
      this.getList();
    },
    onSearch() {
      this.getList();
    },
    cancel() {
      this.$emit("changeShowSelectPop");
    },
    submit() {
      if(Object.keys(this.currentRow).length === 0) {
        this.$message({
          message: '请选择一条数据',
          type: 'warning'
        })
        return false;
      }
      let data = {}
      if (this.selectType === '1') {
        data = {
           id: this.currentRow.articleId,
          name: this.currentRow.title,
          typeName: '文章',
          channel: this.currentRow.channelName,
          orgcode: this.currentRow.organName,
          contentType: 'article',
          remark: this.currentRow.introduction
        }
      } else if (this.selectType === '4') {
        data = {
          id: this.currentRow.id,
          name: this.currentRow.title,
          typeName: '海报',
          contentType: 'poster',
          channel: '',
          orgcode: '',
          remark: this.currentRow.description
        }
      } else {
        data = {
          id: this.currentRow.activityId,
          name: this.currentRow.activityName,
          typeName: this.selectType == '2'? '线上活动' : '线下活动',
          contentType: this.selectType == '2'? 'onlineActivity' : 'offlineActivity',
          channel:  this.currentRow.channelName,
          orgcode: this.currentRow.organName,
          remark: this.currentRow.activityTypeName
        }
      }
      this.$emit("changeShowSelectPop", data);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
  },
};
</script>
<style lang="scss" scoped>
.activity_list {
  .title {
    color: #606266;
    font-weight: 500;
    text-align: left;
  }
}
.activity_list_content {
  .search_head {
    width: 100%;
    border-bottom: 10px solid #ccc;
    .search_form {
      width: 100%;
      display: inline-flex;
      
    }
  }
}
.table_img {
  width: 30px;
  height: 30px;
}
</style>
